<template>
  <div class="app-container">
    <div class="head-container">
      <span style="margin-left: 20px">时间区间：</span>
      <el-date-picker
        v-model="date"
        type="daterange"
        value-format="yyyy-MM-dd"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
      />
      <span style="margin-left: 20px">成员姓名：</span>
      <el-input v-model="name" clearable size="small" placeholder="请输入成员姓名" style="width: 150px;" />
      <el-button size="mini" type="success" icon="el-icon-search" @click="handleRefreshData">搜索</el-button>
    </div>

    <div v-if="memberData.username">
      <!--成员信息-->
      <div class="info-module">
        <div class="content-title">基本情况</div>
        <el-descriptions>
          <el-descriptions-item label="姓名">{{ memberData.username }}</el-descriptions-item>
          <el-descriptions-item label="担任项目负责人的次数">{{ memberData.leaderTimes }}</el-descriptions-item>
          <el-descriptions-item label="承担主要成员的次数">{{ memberData.mainMemberTimes }}</el-descriptions-item>
          <el-descriptions-item label="承担辅助成员角色次数">{{ memberData.assistMemberTimes }}</el-descriptions-item>
        </el-descriptions>
      </div>
      <div class="info-module">
        <div class="content-title">数据概览</div>
        <el-descriptions>
          <el-descriptions-item label="项目总数">{{ memberData.basicData.projectsNum }}</el-descriptions-item>
          <el-descriptions-item label="合同金额">{{ memberData.basicData.contractAmountSum }}元</el-descriptions-item>
          <el-descriptions-item label="决算金额">{{ memberData.basicData.finalAmountSum }}元</el-descriptions-item>
          <el-descriptions-item label="开票金额">{{ memberData.basicData.invoiceAmountSum }}元</el-descriptions-item>
          <el-descriptions-item label="到账金额">{{ memberData.basicData.receivedAmountSum }}元</el-descriptions-item>
          <el-descriptions-item label="剩余尾款">{{ memberData.basicData.remainBalanceSum }}元</el-descriptions-item>
          <el-descriptions-item label="劳务金额">{{ memberData.basicData.collaborationAmountSum }}元</el-descriptions-item>
          <el-descriptions-item label="承担负责人的项目决算金额">{{ memberData.leaderProjectFinalAmountSum }}元</el-descriptions-item>
          <el-descriptions-item label="主要负责人的项目决算金额">{{ memberData.mainProjectFinalAmountSum }}元</el-descriptions-item>
          <el-descriptions-item label="辅助负责人的项目决算金额">{{ memberData.assistProjectFinalAmountSum }}元</el-descriptions-item>
        </el-descriptions>
      </div>
      <!--表格渲染-->
      <div class="info-module">
        <div class="content-title">项目明细</div>
        <el-table :data="memberData.projectDetail" style="width: 90%; margin-left: 20px;">
          <el-table-column prop="contractCode" label="合同编号" />
          <el-table-column prop="projectName" label="项目名称" />
          <el-table-column prop="contractAmount" label="合同金额" />
          <el-table-column prop="finalAmount" label="决算金额" />
          <el-table-column prop="invoiceAmount" label="开票金额" />
          <el-table-column prop="receivedAmount" label="到账金额" />
          <el-table-column prop="remainBalance" label="剩余尾款" />
          <el-table-column prop="collaborationAmount" label="劳务金额" />
        </el-table>
      </div>
    </div>
    <el-empty v-else description="暂无成员数据" />
  </div>
</template>

<script>
import crudProject from '@/api/project/project'

export default {
  name: 'ProjectMember',
  data() {
    return {
      memberData: {
        basicData: {},
        projectDetail: []
      },
      date: [],
      name: ''
    }
  },
  created() {
    this.handleRefreshData()
  },
  methods: {
    handleRefreshData() {
      const params = {
        startDate: (this.date || [])[0] ? (this.date || [])[0] + ' 00:00:00' : '',
        endDate: (this.date || [])[1] ? (this.date || [])[0] + ' 23:59:59' : '',
        name: this.name
      }
      crudProject.getMemberData(params).then(data => {
        this.memberData = data
      })
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  .app-container {
    .info-module {
      margin-top: 30px;
      font-size: 18px;
    }
    .el-descriptions {
      margin-left: 20px;
      font-size: 15px;
    }
  }
</style>
